<template>
    <div>
        <div class="success-page">
            <div v-if="loading" style="text-align:center;">
                <van-row>
                    <van-col span="24" style="margin-top:300%; text-align:center;">
                        <van-loading type="spinner" color="#1989fa" size="48px"
                                     text-size="24px" vertical>
                            查询中
                        </van-loading>
                    </van-col>
                </van-row>
            </div>
            <div v-else class="content" :style="{borderColor: getColor}">
                <div class="headimg-item" :style="{color: getColor}">
                    <div class="title-item" :style="{background: getBgColor}">
                        <van-icon name="info-o"/>
                        验证信息
                    </div>
                    <p v-if="userType === '1'">{{work_type}}人员专用</p>
                    <div class="qrcode-item">
                        <div class="qrcode-border" :style="{borderColor: getColor}">
                            <div class="headimg-bg"
                                 :style="{backgroundImage: 'url('+ green +')'}"
                                 v-if="cardType === '1'||cardType === '2'"
                                 v-lazy-container="{ error: loadingImg }">
                                <img class="hd-img-responsive" :data-src="user_img">
                            </div>
                            <!--                            <div class="headimg-bg bg-2" v-if="cardType === '2'" v-lazy-container="{ error: loadingImg }">-->
                            <!--                                <img class="hd-img-responsive" :data-src="user_img">-->
                            <!--                            </div>-->
                            <div class="headimg-bg"
                                 :style="{backgroundImage: 'url('+ yellow +')'}"
                                 v-if="cardType === '3'"
                                 v-lazy-container="{ error: loadingImg }">
                                <img class="hd-img-responsive" :data-src="user_img">
                            </div>
                            <div class="headimg-bg"
                                 :style="{backgroundImage: 'url('+ orange +')'}"
                                 v-if="cardType === '4'"
                                 v-lazy-container="{ error: loadingImg }">
                                <img class="hd-img-responsive" :data-src="user_img">
                            </div>
                            <div class="headimg-bg"
                                 :style="{backgroundImage: 'url('+ purple +')'}"
                                 v-if="cardType === '5'"
                                 v-lazy-container="{ error: loadingImg }">
                                <img class="hd-img-responsive" :data-src="user_img">
                            </div>
                            <div class="headimg-bg"
                                 :style="{backgroundImage: 'url('+ red +')'}"
                                 v-if="cardType === '6'"
                                 v-lazy-container="{ error: loadingImg }">
                                <img class="hd-img-responsive" :data-src="user_img">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="divider"></div>
                <div v-if="userType === '0'" class="table-info" :style="{borderColor:getColor}" style="margin-bottom: 10px">
                <van-row style="text-align: center" class="table-info-row2"
                         :style="{color:getColor}">
                    <van-col span="7" class="table-info-row2-col table-right-border title-z"
                             :style="{color:getColor,borderColor:getColor}">
                        <div>扫码时间</div>
                    </van-col>
                    <van-col span="17" class="table-info-row2-col table-right-border value_z"
                             :style="{color:getColor}">
                        {{this.$common.xeUtils.toDateString(new Date(), 'yyyy-MM-dd HH:mm:ss')}}
                    </van-col>
                </van-row>
                </div>
                <div v-if="userType === '0'" class="table-info" :style="{borderColor:getColor}" style="margin-bottom: 10px">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="6" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{userInfo.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            性别
                        </van-col>
                        <van-col span="3" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{userInfo.sex}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            年龄
                        </van-col>
                        <van-col span="3" class="table-info-row2-col value">
                            {{userInfo.age}}
                        </van-col>
                    </van-row>
                    <!--                    <van-row class="table-info-row2" type="flex" align="center">-->
                    <!--                        <van-col span="4" class="table-info-row2-col table-right-border title-x"-->
                    <!--                                 :style="{borderColor:getColor}">-->
                    <!--                            住所-->
                    <!--                        </van-col>-->
                    <!--                        <van-col span="20" class="table-info-row2-col value hd-ellipsis"-->
                    <!--                                 style="padding:5px;justify-content: left;">-->
                    <!--                            {{userInfo.loc_address}}-->
                    <!--                            &lt;!&ndash;                            <br/>&ndash;&gt;-->
                    <!--                            &lt;!&ndash;                            {{userInfo.loc_address}}&ndash;&gt;-->
                    <!--                        </van-col>-->
                    <!--                    </van-row>-->
                </div>
                <div v-if="userType === '1'" class="user-info">
                    <div class="table-info" :style="{borderColor:getColor}">
                        <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>姓名</div>
                            </van-col>
                            <van-col span="8" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userInfo.name}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                <div>状态</div>
                            </van-col>
                            <van-col span="8" class="table-info-row2-col value"
                                     :style="{borderColor:getColor}">
                                {{health_type}}
                            </van-col>
                        </van-row>
                        <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                                 :style="{borderColor:getColor}">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                性别
                            </van-col>
                            <van-col span="8" class="table-info-row2-col table-right-border value"
                                     :style="{borderColor:getColor}">
                                {{userInfo.sex}}
                            </van-col>
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                年龄
                            </van-col>
                            <van-col span="8" class="table-info-row2-col value">
                                {{userInfo.age}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center">
                            <van-col span="4" class="table-info-row2-col table-bottom-border table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                单位
                            </van-col>
                            <van-col span="20" class="table-info-row2-col table-bottom-border value"
                                     style="padding-left:5px"
                                     :style="{borderColor:getColor}">
                                {{worker_type}}
                            </van-col>
                        </van-row>
                        <van-row class="table-info-row2" type="flex" align="center">
                            <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                     :style="{borderColor:getColor}">
                                岗位
                            </van-col>
                            <van-col span="20" class="table-info-row2-col value" style="padding-left:5px">
                                {{work_type}}
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <div class="table-info" :style="{borderColor:getColor}"
                     v-for="(item,index) in personList" :key="index">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="8" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{item.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            关系
                        </van-col>
                        <van-col span="8" class="table-info-row2-col value">
                            {{item.relation}}
                        </van-col>
                    </van-row>
                </div>
                <div class="table-info" :style="{borderColor:getColor}"
                     v-for="(item,index) in childrenList" :key="index">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="8" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{item.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            关系
                        </van-col>
                        <van-col span="8" class="table-info-row2-col value">
                            {{item.relation}}
                        </van-col>
                    </van-row>
                </div>
            </div>
        </div>
        <!--<van-tabbar>
            <van-tabbar-item icon="chat-o" name='1' url="https://mp.weixin.qq.com/s/BQKXZgb3YHiy38csfv9cjQ">在线客服
            </van-tabbar-item>
            <van-tabbar-item icon="service-o" name='2' url="https://mp.weixin.qq.com/s/TRLYCrEDWHg0CYRPkeaSWw">视频客服
            </van-tabbar-item>
        </van-tabbar>-->
        <div class="dialog-item" v-if="dialogShow">
            <van-row>
                <van-col class="dialog-title" span="24">
                    提示
                </van-col>
                <van-col class="dialog-content" span="24">
                    <van-col span="24">
                        <van-icon name="info-o"/>
                    </van-col>
                    <van-col span="24">
                        通行证状态异常<br>
                        请重新扫描二维码
                    </van-col>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
import { scanGoods, scanGoodsToSave, findPermitPersonList, getWorkerList, scanGoodsToUpdatelal } from '@/api/yi-qing-fang-kong.js'
import distData from '@/libs/dist.js'
import loadingImg from '@/assets/images/loadingImg.jpg'
import green from '@/assets/images/qrcode/0DBB22.png'
import blue from '@/assets/images/qrcode/00A2E6.png'
import purple from '@/assets/images/qrcode/A865CF.png'
import orange from '@/assets/images/qrcode/E9611D.png'
import red from '@/assets/images/qrcode/E30920.png'
import yellow from '@/assets/images/qrcode/FFEF00.png'

export default {
  data () {
    return {
      green: green,
      blue: blue,
      purple: purple,
      orange: orange,
      red: red,
      yellow: yellow,
      userType: '0',
      loadingImg: loadingImg,
      user_img: '',
      id: '',
      fontSize: 60,
      currentRate: 0,
      circleColor: '#DDDDDD',
      fillColor: '#f5f5f5',
      userInfo: {
        name: '暂无',
        address: '暂无',
        sex: '暂无',
        age: '暂无',
        loc_address: '',
        loc_title: ''
      },
      worker_type: '暂无数据',
      work_type: '暂无数据',
      health_type: '健康',
      randomNum: '',
      totalTime: 0,
      con: 0,
      offsetheight: document.documentElement.clientHeight - 10,
      qrColor: distData.qrColor,
      fontColor: distData.fontColor,
      borderColor: distData.borderColor,
      bgColor: distData.bgColor,
      bgImg: distData.bgImg,
      cardType: '2',
      loading: true,
      openid: '',
      dialogShow: false,
      // 经度
      lng: '123.410782',
      // 纬度
      lat: '41.789928',
      personList: [],
      childrenList: []
    }
  },
  computed: {
    getBgImg () {
      return this.bgImg[this.cardType]
    },
    getColor () {
      return this.qrColor[this.cardType]
    },
    getCircleColor () {
      return this.borderColor[this.cardType]
    },
    getFillColor () {
      return this.qrColor[this.cardType]
    },
    getFontColor () {
      return this.fontColor[this.cardType]
    },
    getBgColor () {
      return this.bgColor[this.cardType]
    }
  },
  methods: {
    getWorkerList () {
      getWorkerList({ openid: this.openid }).then(ret => {
        if (ret.data.errcode === 0) {
          let data = ret.data.data
          if (data.workList &&
                data.workList !== '' &&
                data.workList !== undefined &&
                data.workList !== null &&
                data.workList.length > 1) {
            this.userType = '1'
            let workList = JSON.parse(data.workList)
            let new_list = []
            let work_type_list = []
            for (let i = 0; i < workList.length; i++) {
              if (workList[i].health_type === '1') {
                this.health_type = '异常'
              }
              new_list.push(workList[i].work_name)
              if (workList[i].type === '1') {
                work_type_list.push('外卖')
              } else if (workList[i].type === '2') {
                work_type_list.push('快递')
              } else if (workList[i].type === '3') {
                work_type_list.push('送水')
              } else if (workList[i].type === '4') {
                work_type_list.push('搬家')
              } else {
                work_type_list.push('装修')
              }
            }
            work_type_list = this.unique(work_type_list)
            this.worker_type = new_list.join()
            this.work_type = work_type_list.join()
          } else {
            this.userType = '0'
          }
        }
      })
    },
    findPermitPersonList () {
      findPermitPersonList().then(ret => {
        if (ret.data.errcode === 0) {
          if (ret.data.data.result.personList.length > 2) {
            let list = JSON.parse(ret.data.data.result.personList)
            for (let i = 0; i < list.length; i++) {
              if (list[i].name.length === 2) {
                list[i].name = list[i].name.substr(0, 1) + '*'
              } else {
                list[i].name = this.desensitization(list[i].name, 1, -1)
              }
            }
            this.personList = list
          }
          if (ret.data.data.result.childrenList.length > 2) {
            let list = JSON.parse(ret.data.data.result.childrenList)
            for (let i = 0; i < list.length; i++) {
              if (list[i].name.length === 2) {
                list[i].name = list[i].name.substr(0, 1) + '*'
              } else {
                list[i].name = this.desensitization(list[i].name, 1, -1)
              }
            }
            this.childrenList = list
          }
        }
      })
    },
    desensitization (str, beginLen, endLen) {
      let len = str.length
      let firstStr = str.substr(0, beginLen)
      let lastStr = str.substr(endLen)
      let middleStr = str.substring(beginLen, len - Math.abs(endLen)).replace(/[\s\S]/ig, '*')
      let tempStr = firstStr + middleStr + lastStr
      return tempStr
    },
    getLocation (itemm, id, master_id) {
      let _this = this
      this.$common.getLocation(function (option) {
        let param = {
          placeId: itemm,
          longitude: '0.0',
          latitude: '0.0'
        }
        if (option.errMsg === 'getLocation:ok') {
          _this.lng = option.longitude
          _this.lat = option.latitude
          console.log(_this.lng, '获取后经度', _this.lat, '获取后纬度')
          // 存入信息
          param = {
            placeId: itemm,
            longitude: _this.lng,
            latitude: _this.lat,
            id: id,
            master_id: master_id
          }
        }
        _this.scanGoodsToUpdatelalAction(param)
      })
      console.log('默认经度', this.lng)
      console.log('默认纬度', this.lat)
    },
    scanGoodsAction (itemm) {
      scanGoods({ placeId: itemm }).then(ret => {
        console.log(ret.data, '返回的信息')
        if (ret.data.errcode === 0) {
          this.loading = false
          console.log('获取注册过的人员信息以及type', ret.data)
          let data = ret.data.data.info
          if (data.type !== undefined) {
            // 插入到履历表
            this.scanGoodsToSaveAction(itemm)
            this.userInfo = data
            this.openid = this.userInfo.openid
            if (this.userInfo.name.length === 2) {
              this.userInfo.name = this.userInfo.name.substr(0, 1) + '*'
            } else {
              this.userInfo.name = this.desensitization(this.userInfo.name, 1, -1)
            }
            // this.userInfo.name = noSensitiveName(this.userInfo.name)
            // this.userInfo.age = getAgeByIdCard(this.userInfo.card_no)
            // this.cardType = data.type
            if (data.type.toString() === '8') {
              this.cardType = '1'
            } else {
              this.cardType = data.type
            }
            this.user_img = 'https://life-photo.oss-cn-beijing.aliyuncs.com/' + ret.data.data.card_no + '.jpg'
            if (data.workList &&
                  data.workList !== '' &&
                  data.workList !== undefined &&
                  data.workList !== null) {
              if (data.workList.length > 2) {
                this.userType = '1'
                let workList = JSON.parse(data.workList)
                let new_list = []
                let work_type_list = []
                for (let i = 0; i < workList.length; i++) {
                  if (workList[i].health_type === '1') {
                    this.health_type = '异常'
                  }
                  new_list.push(workList[i].work_name)
                  if (workList[i].type === '1') {
                    work_type_list.push('外卖')
                  } else if (workList[i].type === '2') {
                    work_type_list.push('快递')
                  } else if (workList[i].type === '3') {
                    work_type_list.push('送水')
                  } else if (workList[i].type === '4') {
                    work_type_list.push('搬家')
                  } else {
                    work_type_list.push('装修')
                  }
                }
                work_type_list = this.unique(work_type_list)
                this.worker_type = new_list.join()
                this.work_type = work_type_list.join()
              }
            } else {
              this.getWorkerList()
            }
            if (data.childrenList &&
                                data.childrenList !== '' &&
                                data.childrenList !== undefined &&
                                data.childrenList !== null &&
                                data.personList &&
                                data.personList !== '' &&
                                data.personList !== undefined &&
                                data.personList != null) {
              if (data.childrenList.length > 2) {
                this.childrenList = JSON.parse(data.childrenList)
                console.log(this.childrenList)
              }
              if (data.personList.length > 2) {
                this.personList = JSON.parse(data.personList)
                console.log(this.personList)
              }
            }
            // this.getLocation(itemm)
          } else {
            console.log('没有此人信息')
            this.$dialog.alert({ message: '此人信息状态异常' })
          }
        } else if (ret.data.errmsg === '请注册通行证') {
          // errcode目前不确定
          this.$dialog.alert({
            message: '欢迎您办理通行证'
          }).then(() => {
            let debug = this.$route.query.debug
            let selfTs = this.$route.query.selfTs
            let query = {}
            if (debug === 'debug') {
              query = { debug: debug }
            }
            if (selfTs === 'selfTs') {
              query = { selfTs: selfTs }
            }
            this.$router.push({
              name: 'epidemic-submit-new',
              query: query
            })
          })
        } else {
          this.dialogShow = true
          let msg = ''
          if (ret.data.sid) {
            msg = ret.data.errmsg + '/sid:/' + ret.data.sid
          } else {
            msg = ret.data.errmsg
          }
          this.failNotice(msg)
        }
      })
    },
    scanGoodsToSaveAction (itemm) {
      scanGoodsToSave({ placeId: itemm, longitude: '0', latitude: '0' }).then(ret => {
        if (ret.data.errcode === 0) {
          this.getLocation(itemm, ret.data.data.id, ret.data.data.master_id)
        } else {
          this.dialogShow = true
          let msg = ''
          if (ret.data.sid) {
            msg = ret.data.errmsg + '/sid:/' + ret.data.sid
          } else {
            msg = ret.data.errmsg
          }
          this.failNotice(msg)
        }
      })
    },
    scanGoodsToUpdatelalAction (data) {
      console.log('@@@@@')
      scanGoodsToUpdatelal(data).then(ret => {

      })
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    changeTel (data) {
      let tel = data.substr(0, 3) + '****' + data.substr(7)
      return tel
    },
    unique (arr) {
      return Array.from(new Set(arr))
    }
  },
  mounted () {
    const placeId = this.$route.query && this.$route.query.placeId
    this.scanGoodsAction(placeId.replace(/ /g, '+'))
  }
}
</script>

<style scoped lang="less">
    .hd-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }

    @borderColor: #f5f5f5;
    .success-page {
        background-image: url("../../../assets/images/showinfo/bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        min-height: 667px;
        display: flex;
        justify-content: center;
        background-color: #f5f5f5;

        .header {
            width: 100%;
            height: 175px;
            text-align: center;

            .font-one {
                margin-top: 20px;
                font-size: 25px;
                color: white;
                font-weight: 900;
            }

            .font-two {
                margin-top: 8px;
                font-size: 13px;
                color: white;
            }
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;
            display: flex;
            justify-content: center;
            font-size: 12px;
            color: #1989FA;

            .bottom-font {
                margin-right: 10px;
            }
        }

        .content {
            overflow: hidden;
            top: 5.5rem;
            position: absolute;
            background-color: white;
            border-radius: 5px;
            width: 280px;
            height: auto;
            padding-bottom: 2px;
            /*border: 1px solid;*/

            .qrcode {
                display: flex;
                justify-content: center;
            }

            .qrcode .box {
                border: 1px solid red;
            }

            .title {
                /*padding-top: 15px;*/
                /*letter-spacing: 0.375rem;*/
                display: flex;
                justify-content: space-between;
                margin: 0 auto;
                font-size: 12px;
                color: red;
            }
        }

        .title-item {
            border-radius: 10px;
            /*background: #9BF5A6;*/
            padding: 10px 0;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;

            .van-icon.van-icon-info-o {
                font-size: 24px;
                font-weight: bold;
                margin-right: 5px;
            }
        }

        .qrcode-item {
            padding: 0 10%;

            .qrcode-border {
                padding: 10px;
                border: 1px solid;
                border-radius: 5px;
            }
        }

        .headimg-item {
            text-align: center;
            padding: 10px;

            p {
                margin: 0 0 10px 0;
            }

            .headimg-bg {
                background-size: 100% 100%;
                padding: 15%;
            }

            .bg-1 {
                background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584433258000/0DBB22.png");
            }

            .bg-2 {
                background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584433258000/00A2E6.png");
            }

            .bg-3 {
                background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584433258000/FFEF00.png");
            }

            .bg-4 {
                background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584433258000/E9611D.png");
            }

            .bg-5 {
                background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584433258000/A865CF.png");
            }

            .bg-6 {
                background-image: url("https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1584433258000/E30920.png");
            }

            .headimg-bg img {
                /*border: px solid #ffffff;*/
            }
        }

        .user-info {
            /*padding: 5px 10px 10px 10px;*/

            .name {
                color: #363636;
                font-weight: bold;
            }

            .address {
                font-size: 14px;
            }
        }
    }

    .divider {
        width: 100%;
        height: 10px;
        background-color: #f5f5f5;
    }

    .out-button {
        margin-top: 10px;
    }

    .button {
        text-align: center;

        .van-button {
            height: 1.75rem;
            line-height: 1.625rem;
        }

        .van-button--normal {
            font-size: 0.75rem;
            padding: 0 1.375rem
        }

        .van-button--primary {
            color: black;
            background-color: #f9f9f9;
            border: 1px solid #DDDDDD
        }
    }

    .button-two {
        margin-left: 15px;
    }

    .button-h {
        text-align: center;
        margin-top: 5px;

        .van-button {
            height: 1.75rem;
            line-height: 1.625rem;
        }

        .van-button--normal {
            font-size: 0.75rem;
            padding: 0 1.375rem
        }

        .van-button--primary {
            color: black;
            background-color: #f9f9f9;
            border: 1px solid #DDDDDD
        }
    }

    .title-x {
        font-size: 14px;
    }
    .title-z {
        font-size: 16px;
    }

    .value {
        color: #787878;
        font-size: 13px;
    }
    .value_z{
        font-size: 18px;
        font-weight: bold;
    }

    .table-info {
        /*padding: 0px 4px 0 4px;*/
        border: 1px solid @borderColor;
        margin-bottom: 10px;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid @borderColor;
            }

            .table-bottom-border {
                border-bottom: 1px solid @borderColor;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .btn-round {
        margin-top: 10px;

        .round {
            border-right: 1px solid red;
            border-radius: 50%;
        }
    }

    .wl-circle {
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 2px 2px 5px #696767;
    }

    .z100 {
        font-size: 12px;
        z-index: 100;
        color: #FFFFFF;
    }

    /deep/ .van-tabbar {
        z-index: 9999;
    }

    .dialog-item {
        position: fixed;
        top: 25%;
        bottom: 35%;
        /*left: 20%;*/
        /*right: 20%;*/
        width: 100%;
        border-radius: 5px;
        /*padding: 0 20%;*/
    }

    .dialog-item .van-row {
        height: 100%;
        padding: 0 15%;
    }

    .dialog-title {
        width: 100%;
        background-color: orangered;
        font-size: 14px;
        padding: 15px;
        text-align: center;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        color: #ffffff;
    }

    .dialog-content {
        background: #ffffff;
        height: 100%;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        color: orangered;
        text-align: center;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .van-icon-info-o {
        font-size: 50px;
    }

    .table-info:last-child {
        /*margin-bottom: 0;*/
    }

    /*.van-loading__text{*/
    /*    color: #ffffff;*/
    /*}*/
</style>
